import React, {useEffect, useRef, useState} from "react";
import {Button, Cascader, Col, Form, Modal, Row, Toast} from "@douyinfe/semi-ui";
import {IconPlus} from "@douyinfe/semi-icons";
import {AddClass, getClassAddjson, getMajeJson, getmajeuridlist} from "../../../../../api/api.js";

function Class_AForm() {
    const [visible, setVisible] = useState(false);
    const [treeData,settreeData] = useState(null)
    const [list3,setlist3] = useState(0)
    useEffect(()=>{
        getMaJson()
    },[visible])
    async function getMaJson(){
        const res = await getClassAddjson()
        setlist3(res.data.data)
    }
    async function Add() {
        let form = new FormData()
        form.append("name",api.current.getValues().clname)
        form.append("mid",api.current.getValues().majeur[2])
        const res = await AddClass(form)
        if (res.data.code==200){
            Toast.success('专业添加成功')
            handleOk()
        }else {
            Toast.success('专业添加失败')
            handleOk()
        }
    }
    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
        console.log('Ok button clicked');
    };
    const handleCancel = () => {
        setVisible(false);
        console.log('Cancel button clicked');
    };
    const handleAfterClose = () => {
        console.log('After Close callback executed');
    };
    const style = {
        boxShadow: 'var(--semi-shadow-elevated)',
        backgroundColor: 'var(--semi-color-bg-2)',
        borderRadius: '4px',
        padding: '10px',
        marginRight: '20px',
        width: '600px',
    };
    const childRef = useRef();
    function valte() {
        api.current.validate()
            .then(values=>{
                Add()
            })
            .catch(errors=>{
                Toast.error("请重新填写表单")
            })
    }
    const api = useRef();

    return (
        <>
            <Button onClick={showDialog}  icon={<IconPlus />} theme="solid" style={{ marginRight: 5 }}>添加班级</Button>
            <Modal
                okText={'Sounds great!'}
                style={{width:"30%",height:"30%"}}
                title={<div><IconPlus  style={{marginRight:"10px"}} />添加班级</div>}
                visible={visible}
                onOk={handleOk}
                afterClose={handleAfterClose} //>=1.16.0
                onCancel={handleCancel}
                closeOnEsc={true}
                footer={
                    <div style={{textAlign:'center'}}>
                        <Button type="primary" onClick={()=>{valte()}}>
                            提交
                        </Button>
                    </div>

                }
            >

                <Row>
                    <Form
                        getFormApi={formApi=>api.current = formApi}
                        onSubmit={values => Toast.info({content: JSON.stringify(values)})}
                    >
                        <>
                            <Row>
                                <Col span={11}>
                                    <Form.Cascader
                                        style={{ width: '100%',marginRight:'15px' }}
                                        treeData={list3}
                                        placeholder="请选择学院/系部/专业"
                                        label={'学院/系部/专业'}
                                        field={'majeur'}
                                        rules={[
                                            { required: true, message: '' },
                                            { type: 'string', message: '请输入汉字' },
                                            { validator: (rule, value) => value != null, message: '学院/系部/专业不能为空' },
                                        ]}
                                    />
                                </Col>
                                <Col span={11} offset={1}>
                                    <Form.Input
                                        rules={[
                                            { required: true, message: '' },
                                            { type: 'string', message: '请输入汉字' },
                                            { validator: (rule, value) => value != null, message: '班级名不能为空' },
                                        ]}
                                        addonBefore="B/Z" label={'班级名'} field='clname' placeholder='请输入班级名'/>
                                </Col>
                            </Row>
                        </>

                    </Form>
                </Row>
            </Modal>
        </>
    );
}
export default Class_AForm